<template>
  <div class="app-container">
    <div v-for="(list, key) in groups">
      <el-divider content-position="left">{{ key }}</el-divider>
      <div v-if="!list || list.length<=0" style="padding: 20px; text-align: left; color: #bababa;">无数据</div>
      <el-row :gutter="12" v-for="(row, index) in sliceList(list, 6)" :key="index" style="margin-bottom: 20px; margin-top: 20px;">
        <el-col :span="3" v-for="(item, i) in row" :key="i">
          <el-card :body-style="{ padding: '0px' }" style="cursor: pointer; text-align: left;" shadow="hover" @click.native="openFormApply(item)">
            <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">

            <div style="padding: 14px;">
              <span>{{item.name}}</span>
            </div>
          </el-card>
        </el-col>
      </el-row>

    </div>
  </div>
</template>

<script>

    import { listDefinitionsByGroup } from "@/api/activiti/definition.js"

    export default {
        name: "apply",
        data() {
            return {
                groups: {
                    "默认分组": []
                }
            }
        },
        computed: {
            sliceList() {
                return function (data,count) {
                    if (data != undefined) {
                        let index = 0;
                        let arrTemp = [];
                        for (let i = 0; i < data.length; i++) {
                            index = parseInt(i / count);
                            if (arrTemp.length <= index) {
                                arrTemp.push([]);
                            }
                            arrTemp[index].push(data[i])
                        }
                        return arrTemp
                    }
                }
            }
        },
        created() {
            this.loadData();
        },
        methods: {
            loadData() {
                listDefinitionsByGroup(this.queryParams).then(rep => {
                    if(rep.data){
                        this.groups = rep.data;
                    }else{
                        this.$message.warning("无可用工单");
                    }
                });
            },
            openFormApply(item){
                let id = item.id.replace(/:/g,"_");
                this.$router.push("/openform/apply/" + item.deploymentId+"/"+id);
            }
        }
    }
</script>

<style>
  .time {
    font-size: 13px;
    color: #999;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }
</style>
